import { createUseStyles } from 'react-jss'
/**
 * 基于createUseStyles方法，构建组件需要的样式；返回结果是一个自定义Hook函数！
 *  + 对象中的每个成员就是创建的类名
 *  + 可以类似于less等编译语言中的‘嵌套语法’，给其后代伪类等设置样式！！
 * 自定义Hook执行，返回一个对象，对象中包含：
 *  + 我们创建的样式类名，作为属性名
 *  + 编译后的样式类名唯一的，作为属性值
 * {box: 'box-0-2-1', title: 'title-0-2-2', list: 'list-0-2-3'}
 * 
 * 而在我们的js中编写的样式，最后会编译为：
 *  
 */
const useStyle = createUseStyles({
    //设置box就是样式类名
    box: {
        backgroundColor: 'lightblue',
        width: '300px'
    },
    title: {
        fontSize: '20px',
        color: 'red',
        '&:hover': {
            color: 'green'
        }
    },
    list: props => {
        return {
            '& a': {
                fontSize: props.size + 'px',
                textDecoration: 'none',
                color: 'black'
            }
        }
    }
})
const Nav = () => {
    let { box, list, title } = useStyle({
        size: 20,
        color: 'orange'
    });
    return <div className={box}>
        <h2 className={title}>购物商城</h2>
        <div className={list}>
            <a href="">首页</a>
            <a href="">秒杀</a>
            <a href="">我的</a>
        </div>
    </div>
}
export default Nav;